import './index.scss'

import { useState } from 'react'
import { useMount } from 'ahooks'

import { A01, A02, A03 } from './Common'
import { GetIndexedDB } from '../../Utils/IndexedDB'

const RestList = { A01, A02, A03 }


const RestA01 = () => {
    const [Theme, setTheme] = useState()
    useMount(async () => {
        const { RestSet } = await GetIndexedDB('theme')
        setTheme(RestSet)
    })

    if (Theme) {
        const { type, list, blurState, blurColor, blurFilter, backColor, boxShadow, radius, padding, iconSize, iconColor } = Theme

        return (
            <div
                className="restTemplate RestA01"
                style={{
                    '--blurColor': blurColor,
                    '--blurFilter': blurFilter,
                    '--radius': radius,
                    '--backColor': backColor,
                    '--boxShadow': boxShadow,
                    '--padding': padding,
                    '--iconSize': iconSize,
                    '--iconColor': iconColor,
                }}
            >
                {blurState && <div className='mask' />}
                {list.map((item, index) => {
                    const Template = RestList[item]
                    return (
                        <Template key={index} type={type} />
                    )
                })}
            </div>
        );
    }


};

export default RestA01;